<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello</title>
    
	<style type="text/css">
		*{margin:0;padding:0;}
		/* canvas{
            width:100%;
            height:100%;
            background-image: url(treebackgroud.png) no-repeat;
            background-position: center;
            background-size: cover;
            } */
			/* 设置画布  style */
            canvas{
				background: url(treebackgroud.png) no-repeat;
				 background-size: 100% 100%;
				overflow: hidden;
				width:100%;
            	height:100%;}

	</style>
</head>
<body>

		<canvas id="canvas"></canvas>
	
		<audio id="audio" src="merry.mp3" style="opacity:0" preload="auto" controls loop hidden="true"/> 
	<script type="text/javascript">

	var myAuto = document.getElementById('audio');  
    	myAuto.play();  
	/**
	 * 定义<canvas>画布;
	 * @type {[type]}
	 */
		var width=window.innerWidth;//获取系统显示宽度;
		var height=window.innerHeight;//获取系统显示高度;
		var canvas=document.querySelector("#canvas");
		var context=canvas.getContext("2d");
		var snowArray=[];//声明一个数组，用于存放创建出来的雪花对象；
 
		canvas.width=width;//设置画布的宽度为系统显示宽度;
		canvas.height=height;//设置画布的高度为系统显示高度;
		cartoon();          //调用动画;
		
		function Redirect(){
                    window.location = "3.html";   //要跳转的页面
            }
        setTimeout('Redirect()', 30000);       //第二个参数是时间，单位毫秒
		
		
		/**
		 * 定义雪花类;
		 */
		class Snowflake{
			constructor(){
				this.init();//构造函数，调用定义好的init()方法;
			}
			init(){
				this.position={   //雪花对象的位置;
					x:Math.random()*width,//x坐标随机;
					y:Math.random()*height,//y坐标随机;
				}
				this.speed=Math.random()*10;//雪花下落速度为0-10以内的随机数;
				this.r=Math.random()*6;//雪花的半径为0-6以内的随机数;
				this.transparency=Math.random();//设置雪花的透明度为随机;
				this.color={
					r1:Math.random()*255,//雪花颜色随机;
					g:Math.random()*255,
					b:Math.random()*255,
				}
			}
			draw(){//雪花绘制方法;
				this.position.y++;//y坐标每次递增1像素;
				this.transparency-=0.01;//透明度每次递减0.01;
				if(this.transparency<=0){//透明度小于0，即雪花消失，重新绘制雪花;
					this.init();
				}
				context.beginPath();//开始一个新的图形绘制;
				context.fillStyle="rgba("+this.color.r1+","+this.color.g+","+this.color.b+","+this.transparency+")";//根据类模型绘制圆形雪花;
				context.arc(this.position.x,this.position.y,this.r,0,Math.PI*2);//填充雪花的颜色;
		    	context.fill();
			}	
		}
 
		for(var i=0;i<1000;i++){
			var snow=new Snowflake();//实例化1000个雪花对象;
			snowArray.push(snow);//将雪花对象添加到数组中;
		}
		// var length=snowArray.length;
 
		/**
		 * 定义动画效果;
		 * @return {[type]} [description]
		 */
		function cartoon(){
			context.clearRect(0,0,width,height);//动画完成一次进行清屏操作;
			for(var j=0;j<snowArray.length;j++){
				snowArray[j].draw();//将实例化好的每个雪花对象在画布上画出来;
			}
			requestAnimationFrame(cartoon);//递归调用动画效果;
			
		}
	</script>
</body>
</html>